<!DOCTYPE html>
<html ng-app="userInfoModule">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="/assets/lib/bootstrap/css/bootstrap.min.css">
  <title>angule hello</title>
  <style type="text/css">
  body {
    font-size: 24px;
    overflow-x: hidden;
  }
  
  .hello {
    padding: 48px;
  }
  
  .hello > div {
    margin-bottom: 20px;
    word-break: break-all;
  }
  
  .small {
    font-size: 24px;
  }
  .condition-calc {
    width: calc(100% - 32px);
  }
  .build-result {
    margin-top: 10px;
  }
  .build-result td, .build-result th {
    min-width: 100px;
  }
  </style>
</head>

<body>
  <div ng-controller='helloController' class="hello">
    <section>
      <div>书名格式化:</div>
      <div>
        <input type="text" ng-model="greeting.bookName">
      </div>
      <div>{{greeting.newBookName}}</div>
    </section>
    
    <section>
      <div>WebSocket帧解析:</div>
      <div><textarea style="resize: none; width: 100%; padding: 0 5px;" rows="3" placeholder="打开浏览器开发者工具->Network->WS->刷新视图->点出现的请求->Frames->点receive开头的->Copy message" autofocus ng-model="greeting.wsReqStr"></textarea></div>
      <div>
        <table class="table table-bordered">
          <tr>
            <td ng-repeat="param in wsReqArr"><pre>{{param}}</pre></td>
          </tr>
        </table>
      </div>
    </section>
    <section>
      <hr>
      <div>
        小写:
        <input type="text" ng-model="greeting.text"> => {{textToLowercace}}
      </div>
    </section>
    <section>
      <hr>
      <div>
        时间:
        <input type="text" ng-model="greeting.time" placeholder="毫秒"> => <div style="display:inline-block">{{localTimeString}}<br />{{utcTimeString}}<br />{{timeMsString}} ms</div> <= <input type="text" ng-model="greeting.dataString" placeholder="格式化时间">
      </div>
    </section>
    <section>
      <hr>
      <div>
        移动端尺寸换算:
        <input type="text" ng-model="greeting.num"> px
        = {{result}} px
        => {{resultRem}} rem
      </div>
    </section>
    <section>
      <hr>
      <div>
        尺寸比例:
        <input type="text" ng-model="greeting.ratioX"> x
        <input type="text" ng-model="greeting.ratioY">
        =>
        <span>{{xx}}</span> x
        <input type="text" ng-model="greeting.XY"> x
        <span>{{yy}}</span>
      </div>
    </section>

    <section style="display: none">
      <hr>
      <div>
        var el = document.createElement('pre');
        document.body.appendChild(el);
        el.innerHTML = JSON.stringify(baseOption, null, 2)
      </div>
    </section>
    <section style="display: none">
      <hr>
      <div>
        微信开放平台OAuth2: 公众号url:
        <input style="width: 640px" type="text" ng-model="greeting.url">
      </div>
      <div>
        允许自定义参数state:
        <input style="width: 500px" type="text" ng-model="greeting.state">
      </div>
      <div>{{resultUrl}}</div>
    </section>
    <section style="display: block">
      <hr>
      <div>
        JS注入:
        <input type="text" ng-model="greeting.script">
      </div>
      <div>(function(el){el.setAttribute("src","{{greeting.script}}");document.getElementsByTagName("body")[0].appendChild(el);})(document.createElement("script"))</div>
    </section>
    <section style="display: block">
      <hr>
      <div>
        编码转换:<input type="text" ng-model="greeting.contentText"><br />
        GBK:<input type="text" ng-model="greeting.contentGBK"><br />
        UTF8:<input type="text" ng-model="greeting.contentUTF8">
      </div>
    </section>
    <section style="display: block">
      <hr>
      <div class="row">
        <div class="col-md-4">
          <div>
            Model生成器:
            <input type="text" ng-model="greeting.model.name">
          </div>
          <div ng-repeat="param in greeting.model.params track by $index">
            <input type="text" ng-model="greeting.model.params[$index].name">
            <select ng-init="greeting.model.params[$index].type = greeting.model.options.STRING" ng-model="greeting.model.params[$index].type">
              <option ng-repeat="key in greeting.model.keys">{{greeting.model.options[key]}}</option>
            </select>
          </div>
          <button ng-click="greeting.model.params.push({})">添加</button>
        </div>
        <div class="col-md-8">
          <div class="model-result">
            <pre>{{greeting.modelCode}}</pre>
          </div>
        </div>
      </div>
    </section>
    <section style="display: block">
      <hr>
      <div class="row">
        <div class="col-md-2" ng-repeat="list in greeting.lists">
          <div ng-init="parentIndex=$index">
            <div ng-repeat="item in list track by $index">
              <input type="text" class="condition-calc" ng-model="greeting.lists[parentIndex][$index]">
              <span ng-show="list.length > 1" ng-click="deleteIndex(parentIndex, $index)" class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <button ng-click="list.push('')">添加</button>
            <button ng-show="greeting.lists.length > 2" ng-click="deleteIndex($index)">删除层</button>
          </div>
        </div>
        <div class="col-md-2">
          <button ng-show="greeting.lists.length < 5" ng-click="greeting.lists.push([''])">添加层</button>
          <button ng-click="recoverLists()">恢复</button>
          <button ng-click="buildList()">构建</button>
        </div>
      </div>
      <div class="build-result">
        <table class="table-bordered">
          <tr>
            <th>序号</th>
            <th>场景</th>
            <th>测试</th>
            <th>结果</th>
          </tr>
          <tr ng-repeat="buildItem in greeting.buildList track by $index">
            <td>{{$index + 1}}</td>
            <td>{{buildItem}}</td>
            <td><div contenteditable="true"></div></td>
            <td><div contenteditable="true"></div></td>
          </tr>
        </table>
      </div>
    </section>
    
    <section style="display: none">
      <hr>
      <div>
        JS调试工具weinre:
        <input type="text" ng-model="greeting.ip">
      </div>
      <div>http://{{greeting.ip}}:8080/cc/</div>
      <div>http://{{greeting.ip}}:10086/theme/lottery/</div>
      <div>http://{{greeting.ip}}:8080/followgiant/templet/</div>
      <div>&lt;script src="http://{{greeting.ip}}:10086/target/target-script-min.js#anonymous"&gt;&lt;/script&gt;</div>
      <div>&lt;a href='javascript:(function(e){e.setAttribute("src","http://{{greeting.ip}}:10086/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);'&gt;weinre target debug&lt;/a&gt;</div>
    </section>

    <section style="display: none">
      <div>pipeline:</div>
      <div><textarea style="resize: none; width: 100%; padding: 0 5px;" rows="3" placeholder="" autofocus ng-model="greeting.pipeText"></textarea></div>
      <pre>{{greeting.pipeResult}}</pre>
    </section>
  </div>
  <script src="/assets/lib/angular/1.2.18/angular.min.js"></script>
  <script src="/hy5b/frontend/local-store/index.js"></script>
  <script src="/assets/lib/moment/moment.min.js"></script>
  <script src="script.js"></script>
</body>

</html>
